<template>
	<view>
		<view class="header">
			<view class="carousel">
				<swiper indicator-dots circular=true duration="400">
					<swiper-item class="swiper-item" v-for="(item,index) in homeInfo.pics" :key="index">
						<!-- <swiper-item class="swiper-item"> -->
						<view class="image-wrapper">
							<image :src="item" class="loaded" mode="aspectFit"></image>
							<!-- <image src="@/static/images/zhutu.png" class="loaded" mode="aspectFit"></image> -->
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- <image src="@/static/images/zhutu.png" class="nav" mode="widthFix"></image> -->
			<view class="header-back" @tap="back">
				<image src="@/static/images/houselift.png" class="back" mode="widthFix"></image>
			</view>
			<view class="detail1">
				<image src="/pages7/static/images/tu2.png" mode="scaleToFill" style="height: 90upx;width: 100%;"></image>
				<view class="detail1-content" style="border-radius: 22upx;border-bottom-right-radius: 22upx">
					<view class="detail1-content-line1">
						<view>
							<view class="detail1-content-line1-line1">
								<text style="color: #ff1e1e;font-size: 36upx;">{{homeInfo.price}}</text>
							</view>
							<view class="detail1-content-line1-line2">
								价格
							</view>
						</view>
						<view class="">
							<view class="detail1-content-line1-line1">{{homeInfo.checkin_type}}</view>
							<!-- <view class="detail1-content-line1-line2">出租类型</view> -->
						</view>
						<view class="">
							<view class="detail1-content-line1-line1">{{homeInfo.size}}㎡</view>
							<view class="detail1-content-line1-line2">房间面积</view>
						</view>
					</view>
					<view class="detail1-content-line2">
						<text style="color: #333;">{{homeInfo.title}}</text>
					</view>
					<view class="detail1-content-line3">
						<view class="detail1-content-line3-content">
							{{homeInfo.name}}
						</view>
						<!-- <view class="detail1-content-line3-content" style="margin-left:12upx;">
							{{homeInfo.orientation}}朝向
						</view>
						<view class="detail1-content-line3-content" style="margin-left:12upx;">
							<text v-if="homeInfo.elevator == 1">有电梯</text>
							<text v-else>无电梯</text>
						</view> -->
					</view>
				</view>
			</view>
			<view class="place"></view>
			<view class="Code">
				<view class="Code-itme">
					<view class="Code-data">
						<view class="Code-title">床位</view>
						<view class="COde-sold">{{homeInfo.signle_double_bed}}</view>
					</view>
					<view class="Code-data">
						<view class="Code-title">联系人</view>
						<view class="COde-sold">{{homeInfo.contacts}}</view>
					</view>
					<view class="Code-data">
						<view class="Code-title">位置</view>
						<view class="COde-sold">{{homeInfo.district}}{{homeInfo.address}}</view>
					</view>
					<view class="Code-data">
						<view class="Code-title">服务</view>
						<view class="COde-sold">{{homeInfo.service}}</view>
					</view>
					<view class="Code-data">
						<view class="Code-title">基础</view>
						<view class="COde-sold">{{homeInfo.base}}</view>
					</view>
					<view class="Code-data">
						<view class="Code-title">卫浴</view>
						<view class="COde-sold">{{homeInfo.bathroom}}</view>
					</view>
					
				</view>
			</view>

			<view class="place"></view>
			<view class="Code">
				<view class="code-title" style="font-size: 30upx;font-weight: bold;line-height: 60upx;">简介</view>
				<view class="Code-itme" style="font-size: 28upx;line-height: 50upx;">
					{{homeInfo.detail}}
				</view>
			</view>
		</view>

		<view class="bottom">
			<view class="btn" @tap="callPhone">
				<image src="/static/images/phone.png" mode="" style="width: 32upx;height: 32upx;margin-right: 14upx;">
				</image>
				联系电话
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				homeInfo: {},
				ipMaps: [],
			};
		},

		onLoad: function(options) {
			this.id = options.id;

			uni.showLoading({
				title: '加载中...'
			});

			this.loadData();
			setTimeout(() => {
				this.isLoaded = true;
				uni.hideLoading();
			}, 600)

		},

		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},

			async loadData() {
				let dataObj = {
					id: this.id
				}
				let url = '/house_rent_detail';
				let ldata = await this.$myRequest({
					url: url,
					data: dataObj
				})

				let ndata = ldata.data.data;
				this.homeInfo = ndata

				this.ipMaps = ndata.ip_maps
			},

			//导航
			async gps() {
				//打开第三方地图
				//高德
				let latitude1 = parseFloat(this.ipMaps[0][1]); //要去的纬度-地址
				let longitude1 = parseFloat(this.ipMaps[0][0]); //要去的经度-地址
				//腾讯
				let latitude2 = parseFloat(this.ipMaps[1][1]); //要去的纬度-地址
				let longitude2 = parseFloat(this.ipMaps[1][0]); //要去的经度-地址
				//百度
				let latitude3 = parseFloat(this.ipMaps[2][1]); //要去的纬度-地址
				let longitude3 = parseFloat(this.ipMaps[2][0]); //要去的经度-地址

				let name = this.homeInfo.location; //地址名称
				let url = "";
				let that = this;
				// #ifdef MP-WEIXIN

				uni.openLocation({
					latitude: latitude2,
					longitude: longitude2,
					success: function() {
						// this.$api.msg('success:' + latitude2)
						console.log('success');
					},
					fail: function() {
						// this.$api.msg('error:' + latitude2)
						console.log('success');
					}
				});
				// #endif
				// #ifdef APP-PLUS
				if (plus.os.name == "Android") { //判断是安卓端
					plus.nativeUI.actionSheet({ //选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "高德地图"
						}, {
							title: "腾讯地图"
						}, {
							title: "百度地图"
						}]
					}, function(e) {
						switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
								url =
									`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude1}&lon=${longitude1}&dev=0`;
								break;
							case 2:
								url =
									`qqmap://map/geocoder?coord=${latitude2},${longitude2}&referer=VUHBZ-42PAP-EMLD3-VCORN-OO2J5-FIF2P`;
								break;
							case 3:
								url =
									`baidumap://map/marker?location=${latitude3},${longitude3}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								break;
							default:
								break;
						}

						if (url != "") {
							url = encodeURI(url);
							//plus.runtime.openURL(url,function(e){})调起手机APP应用
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]）  
					that.iosOpenMap(latitude1, longitude1, latitude2, longitude2, latitude3, longitude3, name)
				}

				// #endif

				// #ifdef H5
				// console.log(latitude2)
				uni.navigateTo({
					url: '/pages/tx-map/tx-map?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:' +
						latitude2 + ',' + longitude2 + '&referer=h5&key=VUHBZ-42PAP-EMLD3-VCORN-OO2J5-FIF2P'
				})
				// #endif
			},

			iosOpenMap(latitude1, longitude1, latitude2, longitude2, latitude3, longitude3, name) {

				let url = ''
				plus.nativeUI.actionSheet({
					title: "选择地图应用",
					cancel: "取消",
					buttons: [{
						title: "高德地图"
					}, {
						title: "腾讯地图"
					}, {
						title: "百度地图"
					}]
				}, function(e) {

					switch (e.index) {
						case 1:
							url =
								`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude1}&lon=${longitude1}&dev=0`;
							break;
						case 2:
							url = `qqmap://map/geocoder?coord=${latitude2},${longitude2}&referer=xxx`;
							break;
						case 3:
							url =
								`baidumap://map/marker?location=${latitude3},${longitude3}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
							break;

						default:
							break;
					}
					if (url != "") {
						url = encodeURI(url);
						plus.runtime.openURL(url, function(e) {
							plus.nativeUI.alert("本机未安装指定的地图应用");
						});
					}
				})
			},

			async callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.homeInfo.mobile
				});
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.header {
		padding-bottom: 200upx;

		.carousel {
			height: 750upx;
			position: relative;

			swiper {
				height: 100%;
			}

			.image-wrapper {
				width: 100%;
				height: 100%;
			}

			.swiper-item {
				display: flex;
				justify-content: center;
				align-content: center;
				/* height: 800upx; */
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.nav {
			width: 100%;
			height: 546rpx;
		}

		.header-back {
			position: absolute;
			top: 120rpx;
			left: 20rpx;

			.back {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.detail1 {
			background-color: white;
			width: 94%;
			margin-left: 3%;

			.detail1-content {
				padding: 30upx;

				.detail1-content-line1 {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.detail1-content-line1-line1 {
					height: 44upx;
					line-height: 44upx;
					letter-spacing: 4upx;
					color: #ff1e1e;
					font-size: 36upx;
				}

				.detail1-content-line1-line2 {
					color: #c3c3c3;
					font-size: 26upx;
				}

				.detail1-content-line2 {
					line-height: 38upx;
					padding: 32upx 0;
				}

				.detail1-content-line3 {
					display: flex;
					align-items: center;

					.detail1-content-line3-content {
						padding: 8upx 15upx;
						background-color: #ebefff;
						font-size: 30upx;
					}
				}
			}

			.data-title {
				font-weight: 600;
				width: 300rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-left: 10rpx;
				font-size: 30rpx;
				margin-bottom: 10rpx;
			}

			.solid {
				display: flex;
				// width: 320rpx;
				flex-wrap: wrap;
				// white-space: nowrap;
				// overflow: hidden;

				.solid-data {
					margin: 10rpx;
					background-color: #e1f0fe;
					color: #3b8bfc;
					padding: 10rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
				}
			}

			.price {
				display: flex;
				margin-left: 10rpx;

				.price-item {
					color: #f3511a;
					font-size: 40rpx;
					margin-right: 5rpx;
				}

				.price-box {
					color: #6d6e6e;
					font-size: 26rpx;
					align-self: center;
					margin-top: 10rpx;
				}
			}

			.map {
				position: relative;

				.map-icon {
					width: 663rpx;
					height: 124rpx;
					margin: 0 auto;
				}

				.map-text {
					position: absolute;
					height: 124upx;
					width: 100%;
					top: 0;
					// left: 20rpx;
					display: flex;
					padding-left: 20upx;
					padding-right: 20upx;

					.map-location {
						width: 30rpx;
						height: 36rpx;
						// top: 25rpx;
						margin-left: 10rpx;
					}

					.map-data {
						margin-left: 20rpx;

					}

					.map-title {
						font-size: 30rpx;
					}

					.map-solid {
						color: #999;
						font-size: 28rpx;
						margin-top: 10rpx;
					}

					.map-code {
						display: flex;
						font-size: 28rpx;
						color: #3b8bfc;
						// margin-left: 40rpx;
						// margin-top: 25rpx;
						align-items: center;

						.map-right {
							margin-left: 5rpx;
							width: 13rpx;
							height: 15rpx;
						}
					}
				}
			}
		}
	}

	.Code {
		// position: absolute;
		background-color: white;
		width: 94%;
		// height: 100%;
		margin-left: 3%;
		// top: 1100rpx;
		border-radius: 20rpx;
		padding: 36upx 44upx;
		// display: flex;
		// justify-content: space-around;

		.Code-itme {
			.Code-data {
				display: flex;
				align-items: center;
				// width: 260rpx;
				height: 58upx;

				.Code-title {
					font-size: 28rpx;
					flex: 1;
					margin: 5rpx 0;
					color: #b8b8b8;
				}

				.COde-sold {
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		height: 150rpx;
		background-color: white;
		display: flex;
		width: 100%;
		color: white;

		.btn {
			width: 340rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 80rpx;
			margin: 0 auto;
			margin-top: 35rpx;
			background-color: #f3511a;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.btn1 {
			// flex: 1;
			background-color: #3c88fd;
		}
	}

	.place {
		height: 20upx;
	}
</style>
